<template>
  <div>
    <div class="order-info">
      <h4 class="title">订单提交成功</h4>
      <p class="message">您的订单已生成，系统将为您保留24小时，如超时仍未付款订单将自动关闭！</p>
      <div class="details" v-if="order.address">
        <router-link class="link" :to="'/order/orderInfo?orderId=' + orderId">订单详情 <i class="el-icon-d-arrow-right"></i></router-link>
        <p>
          <span>收货地址：{{order.address.areaName + order.address.address}}</span>
          <span>收货人： {{order.address.name}}</span>
          <span>{{order.address.mobile}}</span>
        </p>
      </div>
    </div>
    <div class="pay-wrapper">
      <div class="title" v-if="order.payPrice">应付金额 :<span class="price">¥ {{order.payPrice.toFixed(2)}}</span></div>
      <div class="ways">
        <ul class="pay-list clearfix">
          <div class="pay-item" :class="{'active': payType === 'alipay'}" @click="payType = 'alipay'">
            <img class="icon" src="../../assets/images/alipay.png" >
            <p class="name">支付宝</p>
          </div>
          <div class="pay-item" :class="{'active': payType === 'wxpay'}" @click="payType = 'wxpay'">
            <img class="icon" src="../../assets/images/wechatpay.png" >
            <p class="name">微信</p>
          </div>
        </ul>
      </div>
      <div class="pay-btn" @click="pay">去支付</div>
    </div>
  </div>
</template>

<script>
import {sign} from '@/util/sign'
import { getAreaName } from '@/util/getAreaName'
export default {
  data () {
    return {
      orderId: this.$route.query.orderId || '', // 订单编号
      order: {}, // 订单
      payType: '' // 支付方式
    }
  },
  mounted () {
    this.$store.commit('setHeaderTit', '收银台')
    this.getData()
  },
  methods: {
    // 获取订单支付信息
    getData () {
      this.$http.post(this.$api + '/pc/order/getOrderDetail', {
        orderId: this.orderId
      }).then(res => {
        if (res.responseCode === '0000') {
          this.order = res.data
          this.order.address.areaName = getAreaName([this.order.address.province, this.order.address.city, this.order.address.district])
          window.localStorage.setItem('payOrder', JSON.stringify(res.data))
        } else {
          this.$message.error({
            duration: this.$store.state.duration,
            message: res.responseMsg
          })
        }
      }).catch(err => {
        console.error(err)
      })
    },
    // 支付
    pay () {
      if (this.payType) {
        this.$http.post(this.$pay + '/app/payment/qrPay', {
          payType: this.payType,
          orderNo: this.orderId
        }).then(res => {
          if (res.responseCode === '0000') {
            if (this.payType === 'alipay') { // 支付宝支付
              let param = {
                payCode: res.data
              }
              param = sign(param)
              let href = this.$pay + '/app/payment/getAliPayHtml?payCode=' + param.payCode + '&sign=' + param.sign
              window.open(href)
            } else if (this.payType === 'wxpay') {
              const {href} = this.$router.resolve({
                name: '微信支付',
                query: {
                  codeUrl: res.data.codeUrl
                }
              })
              window.open(href, '_blank')
            }
          } else {
            this.$message.error({
              duration: this.$store.state.duration,
              message: res.responseMsg
            })
          }
        })
      } else {
        this.$message.error({
          duration: this.$store.state.duration,
          message: '请选择支付方式'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.order-info {
  margin: 20px auto;
  padding: 25px;
  width: 1200px;
  background: #fcfcfc;
  border: solid 1px $border_color;
  .title {
    margin-bottom: 20px;
    padding-left: 36px;
    height: 30px;
    line-height: 34px;
    font-size: 20px;
    color: $red;
    background: url(../../assets/images/right.png)left center no-repeat;
  }
  .message {
    font-size: 14px;
    color: $f_sub;
  }
  .details {
    position: relative;
    margin-top: 35px;
    padding-top: 35px;
    font-size: 14px;
    border-top: solid 1px $border_color;
    .link {
      position: absolute;
      top: 35px;
      right: 25px;
      color: $font_blue;
    }
    p {
      margin-bottom: 15px;
      color: $f_normal;
      span {
        padding-right: 40px;
      }
    }
  }
}
.pay-wrapper {
  margin: 25px auto;
  width: 1200px;
  background: #fcfcfc;
  border: solid 1px $border_color;
  .title {
    padding-left: 25px;
    height: 60px;
    line-height: 60px;
    color: $f_main;
    border-bottom: solid 1px $border_color;
    .price {
      padding-left: 10px;
      font-size: 20px;
      color: $red;
    }
  }
  .ways {
    padding: 25px;
    .pay-list {
      .pay-item {
        position: relative;
        float: left;
        margin-right: 60px;
        padding-left: 50px;
        text-align: center;
        cursor: pointer;
        background: url(../../assets/images/icon-unselect.png) left center no-repeat;
        &.active {
          background: url(../../assets/images/icon-selected.png) left center no-repeat;
        }
        .icon {
          display: inline-block;
          margin-bottom: 5px;
        }
      }
    }
  }
  .pay-btn {
    margin: 20px 25px;
    width: 120px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    background: $red;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      background: $red_l;
    }
    &:active {
      background: $red_d;
    }
  }
}
</style>
